<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
    <script src="../elements/element.js"></script>
    <link rel="stylesheet" href="../elements/element.css">
    <script src="../static/axios.min.js"></script>
    <script src="../static/global.js"></script>
</head>
<style scoped>
    .main {
        display: inline;
    }

    .button-new-tag {
        color: #70bdff;
        margin-left: 15px;
        height: 25px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 15px;
    }

    .check-group {
        display: inline;
    }

</style>
<body>
<div id="app">
<el-form>
    <el-form-item :model="attrs_Sales" v-for="(attr,ids) in attrs_Sales" :label="attr.attr_name+':'" >
        <el-checkbox  v-for=" checkvalues in attr.attr_values" :label="checkvalues">{{checkvalues}}</el-checkbox>
        <el-button class="button-new-tag" v-show="!attrs_Sales[ids].view"  size="small" @click="showInput(ids)">
            <i class="el-icon-plus"></i>自定义</el-button>
        <el-input
                class="input-new-tag"
                v-show="attrs_Sales[ids].view"
                v-model="attrs_Sales[ids].value"
                @keyup.enter.native="handleInputConfirm(ids)"
                @blur="handleInputConfirm(ids)"
                size="small"
        ></el-input>
    </el-form-item>

    </el-form>

</div>
</body>
<script>
    var Main = {
        data() {
            return {
                //后台
                attrs_Sales:[]
            };
        },
        mounted(){
              this.getskuSaleAttr(23)
        },
        methods: {
            getskuSaleAttr(catelog_id){
                 axios.get(glodate.serverZuul+"pmsAttr/getSkuSaleValueByCatelogId",{params:{'catalog_id':catelog_id}})
                     .then(response=>{
                         this.attrs_Sales=response.data.data;
                         console.log(this.attrs_Sales);

                     })
            },
            handleInputConfirm(ids) {
                let inputValue = this.attrs_Sales[ids].value;
                console.log(inputValue);
                if (inputValue) {
                    alert("不为空")
          if(this.attrs_Sales[ids].attr_values==null){
              this.attrs_Sales[ids].attr_values=[]
              this.attrs_Sales[ids].attr_values.push(inputValue)
          }else{
              if (!this.attrs_Sales[ids].attr_values.includes(inputValue)) {
                  this.attrs_Sales[ids].attr_values.push(inputValue)
              }
          }


                    this.attrs_Sales[ids].view = false;
                    this.attrs_Sales[ids].value = '';

                }

            },
            showInput(idx) {

                console.log("``````", idx);
                this.attrs_Sales[idx].view = true;
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

</script>
</html>